<!doctype html>
<html lang="en">
  <head>
    <th:block th:include="include :: desk-header" />
    <style>
      .titlecss mark{
        background-color: yellow;
        font-weight: bold;
      }
    </style>
  </head>

  <body style=" padding-top: 0px;">

    <div class="container-fluid">
      <div class="row">

          <h2 class="sub-header">
            网络数据列表
          </h2>
          <div class="table-responsive">
            <div class="panel-body">

              <div id="toolbar">
                <form class="form-inline" method="post" id="ffSearch">
                  <div  class="form-group">

                <select name="sid" class="form-control">
                  <option value="0">=选择数据源=</option>
                  <option th:each="sites: ${sitelist}" th:text="${sites.title}" th:value="${sites.id}"></option>
                </select>
                    <input type="text" name="keywords" class="form-control" placeholder="请输入关键词">
                    <button type="button" class="btn btn-primary search-btn"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                  </div>
                </form>
              </div>

            <table class="table table-striped table-hover" id="tabledata">
            </table>
          </div>
        </div>
      </div>
    </div>

    <th:block th:include="include :: desk-footer" />

  <script>

    $(function (){

      $(document).on("click",".del",function (){
        var id=$(this).attr("data");
        layer.confirm('是否删除该记录？', {
          btn: ['确定', '关闭'] //按钮
        }, function(){
          $.getJSON("/index/delete",{id:id},function (res) {
            if(res.code==0)return layer.msg(res.msg);
            location.reload();
          })
        });
      })


      $(".search-btn").click(function () {
        $("input[name='keywords']").val(function () {
           return $(this).val().trim();
        });
        $('#tabledata').bootstrapTable('refresh');
        $('#tabledata').bootstrapTable('pageNumber',1);
        return false;
      })



      $('#tabledata').bootstrapTable({
        url:"/index/newslist",
        sidePagination: "server",           //数据方式：client客户端分页，server服务端分页（*）
        cache: false,
        toolbar: '#toolbar',                //工具按钮用哪个容器
        dataField: 'list', //返回数据参数
        pagination: true,             //是否显示分页（*）
        sortable: true,               //是否启用排序
        sortName: "id",
        sortOrder: "desc",             //排序方式
        showFooter:false,             //开启底部
        striped:true,                 //是否显示行间隔色,table需要加上样式table-striped
        pageNumber: 1,                //初始化加载第一页，默认第一页,并记录
        pageSize: 10,                  //每页的记录行数（*）
        pageList: [5,10,20,50,100],   //可供选择的每页的行数（*）
        minimumCountColumns: 3,             //最少允许的列数
        smartDisplay:false,           //保证上面数字显示完整
        search: false,                //是否显示表格搜索
        searchOnEnterKey: true,
        clickToSelect: true,                //是否启用点击选中行
        showColumns: true,           //是否显示所有的列（选择显示的列）
        showRefresh: true,                  //是否显示刷新按钮
        showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
        showJumpTo: true, // 是否显示跳页
        cardView: false,                    //是否显示详细视图
        detailView: false,                  //是否显示父子表

        queryParams : function (params) {

          //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
          var temp = $("#ffSearch").serializeJsonObject();
          temp['pagesize'] = params.limit;  //页面大小
          temp['pagenum'] = (params.offset / params.limit) + 1;  //页码
          temp['sort'] = params.sort;      //排序列名
          temp['order'] = params.order;    //排位命令（desc，asc）
          return temp;

        },
        columns: [
          {
            field: 'id',
            title: 'ID',
            width: 60
          },
           {
            field: 'sidstr',
            title: '数据源',
            width: 100,
            sortable: false
          },
          {
            field: 'title',
            title: '标题',
            width: 300,
            sortable: true,
            formatter: function (value, row, index) {
              var result = "";
              result += "<div class='titlecss'>" + row.title + "</div>";
              if(row.timecreate){
                result += row.timecreate
              }
              return result;
            }
          },
          {
            field: 'time',
            title: '时间',
            width: 100,
            sortable: true
          },
          {
            field:'id',
            title: '操作',
            width: 200,
            align: 'center',
            valign: 'middle',
            formatter: actionFormatter
          },
        ],
        onLoadSuccess: function (res) {
          //createEchart(res);
          var key = $("input[name='keywords']").val();
          if(key=="" || key.trim()=="")return;
          $(".titlecss").html(function() {
            return $(this).text().replace(key,"<mark>"+key+"</mark>");
          });
        },
        onLoadError: function () {
          console.log(("数据加载失败！"));
        },
        formatNoMatches: function(){
          return "没有找到匹配的记录";
        }


      });

      //操作栏的格式化
      function actionFormatter(value, row, index) {
        var result = "";
        result += '<a href="'+row.url+'" class="btn btn-primary btn-sm repwd" target="_blank">详情</a> ';
        return result;
      }


    })

    //自定义函数处理queryParams的批量增加
    $.fn.serializeJsonObject = function () {
      var json = {};
      var form = this.serializeArray();
      $.each(form, function () {
        if (json[this.name]) {
          if (!json[this.name].push) {
            json[this.name] = [json[this.name]];
          }
          json[this.name].push();
        } else {
          json[this.name] = this.value || '';
        }
      });
      return json;
    }



  </script>
  </body>
</html>
